<template>
	<view class="c-cell">
		<slot name="title">
			<view class="title" :style="titleStyle" v-if="title">{{ title }}</view>
		</slot>
		<slot></slot>
	</view>
</template>

<script setup>
	/**
	 * c-cell 列表组件
	 * @description c-cell 通用列表组件
	 * @property { String } title 信息分组组件标题
	 * @property { String } titleStyle 标题样式
	 * @example <c-cell title="基本信息"><c-cell-item name="头像"></c-cell-item></c-cell>
	 */
	import { useSlots } from 'vue';
	import _props from './props.js';

	const props = defineProps(_props);
</script>

<style lang="scss">
	.c-cell {
		background-color: $bg-inverse-color;
		.title {
			padding: $margin-24;
			font-size: $font-32;
			color: $main-color;
			font-weight: bold;
		}
	}
</style>
